<template>
  <i-biz-control-base :controller="c" :class="ns.b()" :style="cssVars">
    <uni-search-bar
      v-model="c.state.query"
      :class="ns.b('quick-search')"
      :placeholder="c.placeHolder"
      @input="onInput"
    ></uni-search-bar>
  </i-biz-control-base>
</template>
<script lang="ts">
export default {
  options: {
    addGlobalClass: true,
    virtualHost: true,
    styleIsolation: "shared"
  },
};
</script>
<script setup lang="ts">
import { computed, PropType } from "vue";
import { debounce } from "lodash-es";
import { ISearchBar } from "@ibiz/model-core";
import { useControlController, useNamespace } from "@/use";
import { SearchBarController } from "@ibiz-template/runtime";

const props = defineProps({
  modelData: {
    type: Object as PropType<ISearchBar>,
    required: true,
  },
  context: { type: Object as PropType<IContext>, required: true },
  params: { type: Object as PropType<IParams>, default: () => ({}) },
});

const c = useControlController((...args) => new SearchBarController(...args));
const ns = useNamespace(`control-${c.model.controlType!.toLowerCase()}`);

const onSearch = () => {
  c.onSearch();
};

const debounceSearch = debounce(() => {
  if (onSearch) {
    onSearch();
  }
}, 500);

const onInput = (value: string) => {
  c.handleInput(value);
  debounceSearch();
};

const cssVars = computed(() => {
  if (c.model.quickSearchWidth) {
    return ns.cssVarBlock({
      "quick-search-width": `${c.model.quickSearchWidth}px`,
    });
  }
  return {};
});
</script>
<style lang="scss">
@import "./i-biz-search-bar-control.scss";
</style>
